/**
 * Created by Administrator on 2017\9\27 0027.
 */
import React from 'react';
import {Link} from 'react-router-dom';
import template from './../../commonui/template';
import MenuList from './MenuList';
import {Form,Input,Icon,Button,Row,Col} from 'antd';
const FormItem = Form.Item;
const Search = Input.Search;
 class InstutionList extends React.Component{
    constructor(props){
        super(props);
        this.search=this.search.bind(this);
        this.drawInsList=this.drawInsList.bind(this);
        this.drawPkgs=this.drawPkgs.bind(this);
        this.drawToChecked=this.drawToChecked.bind(this);
        this.getlistInfo=this.getlistInfo.bind(this);
        const data =['ww','23','44'];
        this.state= {
            institutionList: data,
            institutions: {
                name: '1',
                size: '1',
                addr: '1',
                Tel: '1'

            },
            packages: [
                {
                    name: "1",
                    details: "1",
                    desc: "1",
                    price: "1"
                }

            ],
            toChecked: data
        }
    }
    search(e){
        console.log(e);
    }
    drawPkgs(){
         let userlists = this.state.packages.map((option,index)=>{
            console.log(option);
            return (
              <div>
                  <Row>
                       <Col span={8}>
                           <img src="" alt="package"/>
                       </Col>
                       <Col span={8}>
                           <p>Package Name:<span>{option.name}</span></p>
                           <p>Content Details:<span>{option.details}</span></p>
                           <p>Package description:<span>{option.desc}</span></p>
                           <p>Package Price:<span>{option.price}</span></p>
                       </Col>
                  </Row>
              </div>
                )
        })
        return userlists;
    }
    drawInsList(){
        let institutions = this.state.institutionList.map((option,index)=>{
            console.log(option);
            return (
                <li key={index}>{option}</li>
                )
        })
        return institutions;
    }
    drawToChecked(){
        let toChecklists = this.state.toChecked.map((option,index)=>{
            console.log(option);
            return (
                <li key={index}>{option}</li>
                )
        });
        return toChecklists;
    }
    getlistInfo(e){
        console.log(e);
    }
    render(){
          const {getFieldDecorator} = this.props.form;
        return (
            <div>
                <Row>
                    <Col span={6}>
                         <MenuList/>
                    </Col>
                    <Col span={8}>
                        <div>
                                <Search placeholder="Search Institution" style={{width:200}} onSearch={this.search}/>
                            </div>
                            <div>
                                <ul onClick={this.getlistInfo}>
                                {this.drawInsList()}
                                </ul>
                            </div>
                    </Col>
                    <Col span={10}>
                            <Row>
                                <Col span={8}>
                                    <img src="" alt="Image1"/>
                                    <img src="" alt="Image2"/>
                                    <img src="" alt="Image3"/>
                                    <img src="" alt="Image4"/>
                                    <img src="" alt="Image5"/>
                                </Col>
                                <Col span={16}>
                                    <h4>Institution Name:<span>{this.state.institutions.name}</span></h4>
                                    <p>Institution Size:<span>{this.state.institutions.size}</span></p>
                                    <Row>
                                        <Col>Institution Adress:<span>{this.state.institutions.addr}</span></Col>
                                        <Col>Concat Number:<span>{this.state.institutions.Tel}</span></Col>
                                    </Row>
                                </Col>
                            </Row>
                            <Row>
                                <Form onSubmit={this.handleSubmit}>
                                     <FormItem label="User name">
                                        {getFieldDecorator('username',{
                                            rules:[{required:true,message:'Please input your User name'}]
                                        })(
                                            <Input />
                                        )}
                                    </FormItem>
                                     <FormItem label="Password">
                                        {getFieldDecorator('password',{
                                            rules:[{required:true,message:'Please input your password'}]
                                        })(
                                            <Input />
                                        )}
                                    </FormItem>
                                    <Button type="submit">Save</Button>
                                </Form>
                            </Row>
                            <Row>
                                <h3>Released Package</h3>
                                <Row>
                                    {this.drawPkgs()}
                                </Row>
                            </Row>
                            <Row>
                                <h3>to be checked</h3>
                                <div>
                                    <ul onClick={this.getlistInfo}>
                                       {this.drawToChecked()}
                                    </ul>
                                </div>
                            </Row>
                    </Col>
                </Row>

            </div>
        )
    }

}

const Instutions = Form.create()(InstutionList)
export default template({
    id: 'PlatInstitutions',
    component: Instutions
});


